<template>
  <div>
    <div class="header">
      <div class="head clearfix">
        <a href="../" class="logo">
          <img src="../../assets/logos.png">
        </a>
        <!--nav-->
        <ul id="head-nav">
          <li :class="{active:isActive=='1'}" :style="{lineHeight:topH+'px'}">
            <a href="http://www.jshrdtz.com" @click="isActive=1" class="view-detail">返回首页</a>
            <!--<router-link class="view-detail" to="http://www.jshrdtz.com" @click="isActive=1">返回首页</router-link>-->
            <!--<a class="view-detail" @click="isActive=1">返回首页</a>-->
          </li>
          <li :class="{active:isActive=='2'}" :style="{lineHeight:topH+'px'}">
            <router-link class="view-detail" to="/productList" @click="isActive=2">我要投资</router-link>
            <!--<a class="view-detail" @click="isActive=2">我要投资</a>-->
          </li>
          <li :class="{active:isActive=='3'}" :style="{lineHeight:topH+'px'}">
            <router-link class="view-detail" to="/myinvest" @click="isActive=3">我的投资</router-link>
          </li>
          <!--<li :class="{active:isActive=='4'}" :style="{lineHeight:topH+'px'}">-->
          <!--<router-link class="view-detail" to="/consultant" @click="isActive=4">理财顾问</router-link>-->
          <!--</li>-->
          <li :class="{active:isActive=='5'}" :style="{lineHeight:topH+'px'}">
            <router-link class="view-detail" to="/account" @click="isActive=5">我的账户</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>


</template>
<script>
  export default {
    name: "topNav",
    props: ["curpages"],
    data() {
      return {
        isActive: this.curpages,
        topH: 0
      }
    },
    mounted() {
//      setTimeout(() => {
//        let h = this.$refs.tops.offsetHeight;
//        this.topH = h
//      }, 0)

    }
  }
</script>
<style scoped lang="scss">

  /*header*/
  .header {
    background: #c8a64f url(../../assets/header_bg.jpg) no-repeat center;
    height: 88px;
    min-width: 1200px;
  }



  .head {
    width: 1200px;
    margin: 0 auto;
    height: 88px;
  }

  .head .logo {
    float: left;
    margin-top: 23px;
    margin-left: 10px;
  }

  #head-nav {
    float: right;
  }

  #head-nav li {
    float: left;
    position: relative;
    height: 88px;
    margin: 0 20px;
    font-size: 14px;
    overflow: hidden;
    line-height: 60px;
    cursor: pointer;
    &.active {
      color: #5a450f;
      border-bottom: 2px solid #5a450f;
    }
    &.active .view-detail {
      color: #5a450f;
    }
    .view-detail {
      width: 100%;
      color: #ffffff;
      font-size: 16px;
      font-family: '微软雅黑';
      font-weight: 600;
    }
  }

  #head-nav li > a {
    color: #fff;
    width: 114px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    line-height: 88px;
  }

  #head-nav li div {
    background: #fff;
    width: 120px;
    display: none;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    text-align: center;
    position: absolute;
    left: -10px;
    z-index: 50;
    opacity: 0.92;
    padding: 5px;
  }

  #head-nav li div a {
    display: block;
    cursor: pointer;
    padding: 10px 0;
  }

  #head-nav li.home-category-item-hover > a, #head-nav li a.current {
    border-bottom: 3px solid #5a450f;
    color: #5a450f;
    height: 85px;
    display: inline-block;
  }

  #head-nav li.home-category-item-hover div {
    display: block;
  }

  .login {
    width: 100%;
    min-width: 1210px;
    height: 100%;
    background-color: #313131;

  }

  .login-top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  .login-top img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }



  @media (max-width: 1400px) {
    .header {
      background: #c8a64f url(../../assets/header_bg.jpg) no-repeat center;
      height: 68px;
      min-width: 1200px;
    }
    .head .logo {
      float: left;
      margin-top: 16px;
      margin-left: 10px;
    }

    .head {
      width: 1200px;
      margin: 0 auto;
      height: 68px;
    }

    .head .logo {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
    }

    #head-nav {
      float: right;
    }

    #head-nav li {
      float: left;
      position: relative;
      height: 68px;
      margin: 0 20px;
      font-size: 14px;
      overflow: hidden;
      line-height: 60px;
      cursor: pointer;
      &.active {
        color: #5a450f;
        border-bottom: 2px solid #5a450f;
      }
      &.active .view-detail {
        color: #5a450f;
      }
      .view-detail {
        width: 100%;
        color: #ffffff;
        font-size: 16px;
        font-family: '微软雅黑';
        font-weight: 600;
      }
    }

    #head-nav li > a {
      color: #fff;
      width: 114px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      line-height: 68px;
    }

    #head-nav li div {
      background: #fff;
      width: 120px;
      display: none;
      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
      text-align: center;
      position: absolute;
      left: -10px;
      z-index: 50;
      opacity: 0.92;
      padding: 5px;
    }

    #head-nav li div a {
      display: block;
      cursor: pointer;
      padding: 10px 0;
    }

    #head-nav li.home-category-item-hover > a, #head-nav li a.current {
      border-bottom: 3px solid #5a450f;
      color: #5a450f;
      height: 85px;
      display: inline-block;
    }

    #head-nav li.home-category-item-hover div {
      display: block;
    }

    .login {
      width: 100%;
      min-width: 1210px;
      height: 100%;
      background-color: #313131;

    }

    .login-top {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
    }

    .login-top img {
      width: 100%;
      min-width: 1210px;
      height: auto;
      display: block;
    }

  }
</style>
